import React from 'react';
import { Modal, Form, Input ,Select } from 'antd';

const FormItem = Form.Item;
const { TextArea } = Input;

function AddSysModal({form, modalVisible, handleModalVisible, okHandle, value={}, group}){

  const onHandleOk = () => {
    form.validateFields((err, fieldsValue) => {
      if(err) return;
      okHandle({
        ...value,
        ...fieldsValue,
        sysgroup: parseInt(fieldsValue.sysgroup),
      });
    });
  }

  return (
    <Modal
      destroyOnClose
      title="修改系统"
      visible={modalVisible}
      onOk={onHandleOk}
      onCancel={() => handleModalVisible()}
      >
      <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="系统名称">
        {form.getFieldDecorator('name', {
          rules: [{ required: true, message: '系统名称不能为空'}],
          initialValue: value.name,
        })(<Input placeholder="请输入系统名称" />)}
      </FormItem>
      <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="所属系统">
        {form.getFieldDecorator('sysgroup', {
          rules: [{ required: true, message: '请选择所属系统'}],
          initialValue: value.sysgroup ? value.sysgroup+'' : '',
        })(
          <Select style={{width: '100%'}}
            placeholder="请选择所属系统">
            { group.map(item => <Select.Option key={item.id}>{item.name}</Select.Option>)}
          </Select>
        )}
      </FormItem>
      <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="ip">
        {form.getFieldDecorator('ip', {
          rules: [{ required: true, message: 'ip地址不能为空'}],
          initialValue: value.ip,
        })(<Input placeholder="请输入ip地址" />)}
      </FormItem>
      <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="端口">
        {form.getFieldDecorator('port', {
          initialValue: value.port
        })(<Input placeholder="默认22" />)}
      </FormItem>
      <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="用户名">
        {form.getFieldDecorator('username', {
          rules: [{ required: true, message: '用户名不能为空'}],
          initialValue: value.username,
        })(<Input placeholder="登录服务器的用户名" />)}
      </FormItem>
      <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="密码">
        {form.getFieldDecorator('password', {
          rules: [{ required: true, message: '密码不能为空'}],
          initialValue: value.password,
        })(<Input placeholder="登录服务器的密码" />)}
      </FormItem>
      <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="系统描述">
        {form.getFieldDecorator('desc', {
          initialValue: value.desc,
        })(<TextArea rows={4} placeholder="系统简短描述" />)}
      </FormItem>
    </Modal>
  );
}

export default Form.create()(AddSysModal);
